<template>
    <NLayout>
        <NList>
            <NListItem v-for="item in modelValue">
                <template #prefix>
                    <NIcon size="25">
                        <FolderIcon v-if="item.IsDir"
                                    style="color: #FFD150"></FolderIcon>
                        <FileIcon v-else></FileIcon>
                    </NIcon>
                </template>
                <NTooltip :show-arrow="false"
                          :delay="1000"
                          :duration="500"
                          trigger="hover">
                    <template #trigger>
                        {{ item.Name }}
                    </template>
                    {{ item.Name }}
                </NTooltip>
            </NListItem>
        </NList>
    </NLayout>
</template>

<script lang="ts">
import {defineComponent, PropType, toRefs, watch} from "vue";
import {NIcon, NList, NListItem, NTooltip}        from "naive-ui"
import {
    FolderOutlined as FolderIcon,
    FileOutlined as FileIcon
}                                                 from "@vicons/antd"
import { FileEntry } from "frontend/src/utils/wails/system";

export default defineComponent({
    components: {
        NIcon,
        NList,
        NListItem,
        FolderIcon,
        FileIcon,
        NTooltip
    },
    props: {
        modelValue: {
            type: Array as PropType<FileEntry[]>
        }
    },
    setup(props) {
        const {modelValue} = toRefs(props)

        watch(modelValue, () => {
            console.log(modelValue.value)
        })
        return {
            modelValue
        }
    }
})
</script>

<style scoped>

</style>